<template>
  <div>
    
  <input id='tipinput' v-model="zhi" style="width: 80%; height: 30px" type="text" />
  <button @click="sousuo" style="width: 5%; height: 30px">搜索</button>
    <div id="container" ref="amap">
    </div>
    <div id="my-panel"></div>
  </div>
  
</template>
 
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { ref,onMounted } from 'vue'

export default {
  data() {
    return {
      zhi:'',
      map: null,
      placeSearch: null,
      mapModule: null, // AMap
      myLocation:null
    }
  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: 'cb2b1b7b0c801f8a8fbfa08911dc5452' // 申请key对应的秘钥 -> 注意了，如果不搭配密钥使用，搜索将没有结果
    }
    // 初始化地图
    this.initAMap()
  },
  destroyed() {
    // 销毁地图
    this.map.destroy()
  },
  methods: {
    // 初始化地图函数
    initAMap() {
      const _this = this
      AMapLoader.load({
        key: '90f8ed6a70d30e928e3f03d816ec52e5', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: []
      })
        .then((AMap) => {
          // 保存AMap实例
          _this.mapModule = AMap
          const map = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: '3D', // 默认2d地图模式
            zoom: 12, // 初始化地图级别
            zooms: [5, 30],
            // 可以设置初始化当前位置
            center: [116.397428, 39.90923],
            resizeEnable: true
          })
          // 添加控件
          AMap.plugin(
            [
              'AMap.ElasticMarker',
              'AMap.Scale',
              'AMap.ToolBar',
              'AMap.HawkEye',
              'AMap.MapType',
              'AMap.Geolocation',
              'AMap.AutoComplete',
              'AMap.PlaceSearch',
              'AMap.CitySearch',
              "AMap.Weather",
            ],
            function(){
              map.addControl(new AMap.ElasticMarker())
              map.addControl(new AMap.Scale())
              map.addControl(new AMap.ToolBar())
              map.addControl(new AMap.HawkEye())
              map.addControl(new AMap.MapType())
              map.addControl(new AMap.Geolocation())
              
        }
          )
          _this.map = map
          // 搜索功能
          _this.toSearch()
        })
        .catch((e) => {
          console.log(e)
        })
    },
    sousuo(){
      const e={
        poi:{
          name:this.zhi
        }
      }
      this.select(e)
      // this.tianqi()
    },
    // tianqi(){
    //   var weather = new AMap.Weather();
    //           weather.getLive(this.zhi, function (err, data) {
    //             console.log(this.zhi)
    //             //信息窗体的内容
    //             // var content = [
    //             //   "城市:"+data.province+'省'+data.city,
    //             //   "邮编:"+data.adcode,
    //             //   "时间"+data.reportTime,
    //             // ];
    //             //创建 infoWindow 实例
    //     //       var infoWindow = new AMap.InfoWindow({
    //     //         content: content.join("<br>"), //传入字符串拼接的 DOM 元素
    //     //         anchor: "top-left",
    //     //       });
    //     //       //打开信息窗体
    //     // infoWindow.open(map, map.getCenter()); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。
    //   });
              
    // },
    toSearch() {
      const _this = this
      // 实例化AutoComplete
      const autoOptions = {
        // input 为绑定输入提示功能的input的DOM ID,注意这个id要个搜索输入框的id一致
        input: 'tipinput' 
      }
      const autoComplete = new _this.mapModule.AutoComplete(autoOptions)
      autoComplete.on('select', _this.select)// 注册监听，当选中某条记录时会触发
    },
    select(e) {
      const _this = this
      // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
      // { map: _this.map } ==> 这个对象是能配置的 --> 根据官方文档配置即可，需要什么配置什么
      const placeSearch = new _this.mapModule.PlaceSearch({
        pageSize: 5, //单页显示结果条数
            pageIndex: 1, //页码
            city: "010", //兴趣点城市
            // citylimit: true, //是否强制限制在设置的城市内搜索
            map: _this.map, //展现结果的地图实例
            panel: "my-panel", //结果列表将在此容器中进行展示。
            autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
      })
      placeSearch.search(e.poi.name) // 关键字查询查询
    }
}
}
</script>
<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 900px;
}
</style>